import React from 'react';
import ReactDOM from 'react-dom/client';
import { lines } from './data';
// import './demo.js';
import './index.css';

const mylines = lines
const ws = new WebSocket('ws://10.0.0.46:8090')

function Square(props) {
  return (
    <button
      className="square"
      onClick={() => props.onClick()}
    >
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (<Square
      value={this.props.squares[i]}
      // value={i}
      key={i}
      onClick={() => this.props.onClick(i)}
    />);
  }
  renderLine() {
    const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
    const lin = arr.map((num) => <div className="board-row" key={num}>
      {arr.map(i=>this.renderSquare(12 * num + i))}
    </div>)
    return (
      lin
    );
  }
  render() {
    return (
      <div>
        {this.renderLine()}
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      history: [{ squares: Array(64).fill(null) }],
      isNext: false,
      isStart: false,
      isFirst: false,
    }
    ws.onmessage = (({ data }) => {
      if (data.indexOf('data') !== -1) {
        if (data === 'data:start') {
          this.setState({ isStart: true })
        } else {
          const i = Number(data.split(':')[1])
          const sq = this.state.history
          const newsq = sq[sq.length - 1].squares.slice()
          if (calculateWinner(newsq) || newsq[i]) {
            return
          }
          newsq[i] = this.state.isNext ? 'O' : 'X'
          this.setState({ history: sq.concat({ squares: newsq }), isNext: !this.state.isNext })
        }
      }
    })
  }

  handleClick(i) {
    if (!this.state.isStart) {
      alert('未开始')
      return
    }
    if (this.state.isFirst && !this.state.isNext) {
      ws.send(i)
    } else if (!this.state.isFirst && this.state.isNext) {
      ws.send(i)
    } else {
      alert('对方回合')
    }
  }

  handleStart() {
    if (this.state.isStart) { return }
    this.setState({ isFirst: true, isStart: true })
    ws.send('start')
  }

  render() {
    const sq = this.state.history
    const lis = sq[sq.length - 1]
    const winner = calculateWinner(lis.squares)
    let status;
    if (winner) {
      status = 'Winner is ' + winner
    } else {
      status = '下一步: ' + (this.state.isNext ? 'O' : 'X');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={lis.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>
            <button onClick={() => this.handleStart()}>{this.state.isStart ? '已开始' : '选择先手'}</button>
          </ol>
        </div>
      </div>
    );
  }
}

function calculateWinner(squares) {
  const lines = mylines;
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c, d, e] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c] && squares[a] === squares[d] && squares[a] === squares[e]) {
      return squares[a];
    }
  }
  return null;
}

// ========================================

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Game />);
